<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="layout">
    <Content style="padding: 20px; border-radius: 10px">
      <FlexTitle title="流程列表">
        <el-button @click="handleRoute" type="primary" round size="medium" icon="el-icon-plus">创建流程</el-button>
<!--        <el-button @click="importJsonVisible = true" type="success" round size="medium" icon="el-icon-upload2"-->
<!--          >导入JSON</el-button-->
<!--        >-->
      </FlexTitle>
      <QueryList ref="queryList" />
    </Content>
    <!-- 导入JSON -->
    <el-drawer
      title="导入JSON"
      v-model="importJsonVisible"
      size="70%"
      :style="zoomScaleStyle"
      destroy-on-close
      :modal-append-to-body="false"
    >
      <v-json-editor v-model="importJson" :style="{ flex: 1 }"></v-json-editor>
      <div class="drawer-foot">
        <el-button size="medium" type="primary" style="width: 50%" @click="handleImportJsonSubmit">确定</el-button>
        <el-button size="medium" type="danger" style="width: 50%" @click="importJsonVisible = false">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { FlexTitle, QueryList } from './list'
import Content from './form/Content.vue'
import { flowPath } from '@/framework-code/utils/constants'
import apiProc from './api/proc'
export default {
  components: {
    //VJsonEditor: () => import(/* webpackChunkName: 'workFlowFormDesign' */ 'v-jsoneditor'),
    FlexTitle,
    QueryList,
    Content
  },
  data() {
    return {
      importJsonVisible: false,
      importJson: {}
    }
  },
  computed: {
    zoomScaleStyle() {
      if (document.documentElement.style.zoom) {
        let scale = 1 / document.documentElement.style.zoom
        return 'zoom:' + scale + ''
      }
      return ''
    }
    // jsonEditerHeight() {
    //   if (document.documentElement.style.zoom) {
    //     let scale = 85 / document.documentElement.style.zoom
    //     return scale + 'vh'
    //   }
    //   return '85vh'
    // }
  },
  methods: {
    handleRoute() {
      this.$router.push({ path: "/oa/design" })
    },
    async handleImportJsonSubmit() {
      await this.procModelImport(this.importJson)
    },
    async procModelImport(postdata) {
      try {
        const { code } = await apiProc.apiProcModelImport(postdata)
        if (code === 200) {
          // this.mData = data
          this.importJsonVisible = false
          this.$message.success('模型导入成功！')
          this.$refs.queryList.onSubmit()
        }
      } catch ({ msg }) {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style scoped>
/*@import '@/framework-code/form/styles/index.scss';*/
.drawer-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  display: flex;
  z-index: 9999;
}
.layout {
  height: 100%;
  border-radius: 10px;
  padding: 0 10px;
}
.title {
  font-weight: 700;
  color: #000000;
}
.el-table__row:nth-child(2n) {
  background-color: #fafafa !important;
}
</style>
